<template>
	<view class="main">
		<view :class="show ? 'fade-in' : 'fade-out'">
			<view class="topic">
				<view class="left" @click="gouser(topicUser)">
					<image :src="topicUser.userAvatar" mode=""></image>
				</view>
				<view class="right">
					<view class="m-bot tn-flex tn-flex-col-center tn-flex-row-between">
						<view class="name-left">
							<view class="lv-name tn-flex tn-flex-col-center">
								<view class="name">{{topicUser.userName}}</view>
								<view class="lv" v-if="topicUser.vip == 1">
									<text>{{topicUser.vip_lv}}</text>
									<!-- <image v-if="topicUser.lv == 1" src="/static/my/v1.png" mode="" class="v-icon">
									</image>
									<image v-if="topicUser.lv == 2" src="/static/my/v2.png" mode="" class="v-icon">
									</image>
									<image v-if="topicUser.lv == 3" src="/static/my/v3.png" mode="" class="v-icon">
									</image>
									<image v-if="topicUser.lv == 4" src="/static/my/v4.png" mode="" class="v-icon">
									</image> -->
								</view>
							</view>
							<view class="time">{{topicUser.date}}
								<template v-if="!isAuditVersion">
									发布于{{topicUser.city}}
								</template>
							</view>
						</view>
						<view class="attention" v-if="!topicUser.is_follow" @click="guanzhu(topicUser.user_id,1)">
							<image src="/static/index/focus.png" mode=""></image>
							<view class="attention-text">关注</view>
						</view>
						<view class="attention" @click="guanzhu(topicUser.user_id,0)" v-else>
							<image src="/static/index/focus1.png" mode=""></image>
							<view class="attention-text">已关注</view>
						</view>
					</view>


					<!-- 内容主体部分 图文-->
					<view class="content" v-if="topicUser.price - 0 <=0 || topicUser.is_buy==1">
						<view class="details" v-html="topicUser.content"></view>
						<view class="imgList" v-if="topicUser.mainImage">
							<block v-for="(item_img,index) in topicUser.mainImage" :key="index">
								<view class="image" @click.stop="previewImage(index)">
									<w-image :src="item_img" width="188rpx" height="188rpx" radius="10rpx"></w-image>
								</view>
							</block>
						</view>
					</view>
					<!-- 付费帖子 -->
					<view v-if="topicUser.price - 0 >0&&topicUser.is_buy==0"
						class="content tn-flex tn-flex-direction-column">
						<view class="pay tn-flex tn-flex-col-center">
							<text class="pay-tag">#付费贴</text>
							<view class="details">
								付费帖子，您需要支付<text class="price">{{topicUser.price}}</text>海豚币
							</view>
						</view>
						<view class="comm-btn pay-btn" @click="submitPay">购买</view>
					</view>
					<!-- 视频 -->
					<view class="content" v-if="topicUser.vod && (topicUser.price - 0 <=0 || topicUser.is_buy==1)">
						<!-- <view class="details">视频帖子</view> -->
						<view class="video-kuai">
							<video :src="topicUser.vod" class="video"></video>
						</view>
					</view>
					<!-- 语音 -->
					<view class="content" v-if="topicUser.voc && (topicUser.price - 0 <=0 || topicUser.is_buy==1)">
						<!-- <view class="details">斤斤计较</view> -->
						<view class="voice tn-flex tn-flex-col-center" @click.stop="play">
							<!-- 未播放 -->
							<image src="/static/my/play.png" v-if="!isplay" class="play" mode=""></image>
							<!-- 播放中 -->
							<image src="https://web.lanmei.co/image/pause.png" v-else class="play" mode=""></image>
							<image src="/static/my/playIcon.png" class="playIcon" :class="{'op-animation':isplay}"
								mode=""></image>
							<text class="s">{{topicUser.vocscend}}s</text>
						</view>
					</view>
					<!-- 网盘 -->
					<view class="content"
						v-if="topicUser.cloudbody && (topicUser.price - 0 <=0 || topicUser.is_buy==1)">
						<!-- <view class="details">网盘地址</view> -->
						<view class="network-disk tn-flex tn-flex-col-bottom">
							<view class="text ">网盘：{{topicUser.cloudbody}}</view>
							<view class="comm-btn disk-btn" @click="fuzhi(topicUser.cloudbody)">复制</view>
						</view>
						<view class="network-disk mar-disk tn-flex tn-flex-col-bottom">
							<view class="text">密码：{{topicUser.cloudbodypass}}</view>
							<view class="comm-btn disk-btn" @click="fuzhi(topicUser.cloudbodypass)">复制</view>
						</view>
					</view>
					<!-- 超链接 -->
					<view class="content" v-if="topicUser.linkbody && (topicUser.price - 0 <=0 || topicUser.is_buy==1)">
						<!-- <view class="details">超链接</view> -->
						<view class="network-disk tn-flex tn-flex-direction-column tn-flex-col-top">
							<view class="text">超链接：{{topicUser.linkbody}}</view>
							<view class="comm-btn hyperlink-btn" @click="fuzhi(topicUser.linkbody)">复制</view>
						</view>
					</view>
					<!-- 投票 -->
					<view class="content" v-if="topicUser.pkbody && (topicUser.price - 0 <=0 || topicUser.is_buy==1)">
						<view class="details">{{topicUser.pkbody}}</view>
						<view class="vote-list">
							<block v-for="(itempk,indextou) in topicUser.pklist" :key="indextou">
								<view class="vote-item">
									<view class="vote-title">{{indextou+1}}.{{itempk.body}}({{itempk.zhi}}票)</view>
									<view class="vote-xian tn-flex tn-flex-col-center">
										<tn-line-progress :percent="itempk.zhi/topicUser.pklist_num*100"
											activeColor="#9D5EF4" inactiveColor="#211C37"
											:height="16"></tn-line-progress>
										<view class="vote-btn" @click="toupiao(itempk,indextou)">投票</view>
									</view>
								</view>
							</block>
						</view>
					</view>
					<!-- 领取海豚币帖子 -->
					<view class="content tn-flex tn-flex-direction-column" v-if="topicUser.hongbaobody">
						<!-- <view class="details">领取海豚币</view> -->
						<view class="details">
							作者赠送<text class="price">{{topicUser.hongbaobody}}</text>海豚币，{{topicUser.hongbaonum}}人可领取
						</view>
						<view class="get-btn" @click="getRedPop">领海豚币红包</view>
					</view>

					<!-- 话题 -->
					<view class="topic-list tn-flex tn-flex-wrap" v-if="label.length>0">
						<block v-for="(item_label,index) in label" :key="index">
							<view class="topic-list-item" @click.stop="goTagsList(item_label.id)">
								<text class="t1">#</text>
								<text class="t2">{{item_label.title}}</text>
							</view>
						</block>
					</view>
					<!-- 脚步 -->
					<view class="foot tn-flex tn-flex-row-between">
						<view class="foot-left tn-flex tn-flex-col-center" v-if="viewUser.viewUserCount > 0">
							<tn-avatar-group size="sm" :lists="viewUser.latestUserAvatar"></tn-avatar-group>
							<text class="num">{{viewUser.viewUserCount}}人</text>
						</view>
						<view class="" v-else></view>
						<view class="foot-right tn-flex tn-flex-col-center">
							<view class="foot-right-item" @click.stop="upvote(topicUser.id)">
								<image src="/static/index/dianzhan.png" mode="" v-if="!topicUser.is_like" class="img1">
								</image>
								<image src="/static/index/dianzhan1.png" v-if="topicUser.is_like" class="img1"
									:class="{'zoom':Ascale}" mode="">
								</image>
								<image src="/static/index/dianzhan1.png" v-if="topicUser.is_like && Ascale" class="piaofu"
									mode="">
								</image>
								<text class="num">{{topicUser.like_num}}</text>
							</view>
							<view class="foot-right-item">
								<image src="/static/index/pinglun.png" mode="" class="img2"></image>
								<text class="num">{{topicUser.ping_num}}</text>
							</view>
							<view class="foot-right-item" @click="clickTerad(topicUser.id)">
								<image src="/static/index/tread.png" mode="" v-if="topicUser.is_tread == 0"
									class="img3">
								</image>
								<image src="/static/index/tread1.png" mode="" v-else class="img3"
									:class="{'fangda':trample}"></image>
								<text class="num">{{topicUser.tread_num}}</text>
							</view>
						</view>
					</view>

				</view>
			</view>

			<!-- 评论 -->
			<view class="critic-user">
				<view class="critic-title">全部回复（{{commList.length}}）</view>
				<view class="list">
					<view class="item" v-for="(item,index) in commList" :key="index">
						<view class="item-left" @click="gouser(item)">
							<image :src="item.avatar" mode=""></image>
						</view>
						<view class="item-right">
							<view class="top">
								<view class="top-left">
									<view class="name_del">
										<text class="name">{{item.nickname}}</text>
										<text class="del"
											v-if="item.user_id==item.ziji_id||item.fa_user_id==item.ziji_id"
											@click="delcomment(item.id,index)">删除</text>
									</view>
									<view class="time">{{item.create_time}}</view>
								</view>
								<view class="top-right">
									<!-- <view class="top-right-item">
										<image src="/static/my/pinglun.png" class="img1" mode=""></image>
										<text>16</text>
									</view> -->
									<view class="top-right-item" @click="likeComment(item.id,index)">
										<image src="/static/my/zan1.png" v-if="item.is_like" class="img2" mode="">
										</image>
										<image src="/static/my/zan.png" v-else class="img2" mode=""></image>
										<text>{{item.like_num}}</text>
									</view>
								</view>
							</view>
							<view class="details">{{item.content}}</view>
						</view>
					</view>
				</view>
			</view>
			<tn-load-more :status="loadStatus"></tn-load-more>
			<view class="" style="height: 50rpx;"></view>
			<view class="foot-input">
				<input type="text" :cursor-spacing="10" v-model="value" placeholder="发表评论"
					placeholder-class="p-class" />
				<view class="btn" @click="sendmsg">发送</view>
			</view>
		</view>
		<!-- 领取红包弹窗 -->
		<redPacket ref="redPacket" :did="id" :name="topicUser.userName"></redPacket>



	</view>
</template>
<script>
	import redPacket from "./components/red-packet.vue"
	const audioContext = uni.createInnerAudioContext()
	export default {
		components: {
			redPacket
		},
		data() {
			return {
				groupList: [{
						src: 'https://demo.com/avatar/xiaomai1.jpg'
					},
					{
						src: 'https://demo.com/avatar/xiaomai1.jpg'
					}
				],
				videoUrl: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4',
				zan: 0,
				tread: 0,
				animation: '',
				animationData: {},
				value: '',
				id: 0,
				show: false,
				topicUser: '',
				label: [],
				viewUser: '',
				isplay: false,
				page: 1,
				loadStatus: 'nomore',
				commList: [],
				Ascale: false,
				trample: false,
				isAuditVersion:getApp().globalData.isAuditVersion
			}
		},
		onLoad(option) {
			this.id = option.id
			uni.showLoading();
			const promiseArr = [this.getUser(), this.goodsCommentList()]
			Promise.all(promiseArr).then(resArr => {
				this.renderPage(resArr)
			}).catch(err => {
				console.log(err)
			})
		},

		onUnload() {
			// 离开页面停止音频播放
			if (this.isplay) {
				audioContext.stop()
				this.isplay = false
			}
		},
		onReachBottom() {
			this.page++
			this.loadStatus = 'loading'
			this.ReachBottomPage()
		},
		onNavigationBarButtonTap(e) {
			if (e.index == 0) {
				uni.navigateTo({
					url: `/circlePages/report?id=${this.id}&type=${0}`
				})
			}
		},
		methods: {
			// 话题详情
			getUser() {
				return this.$request({
					loading: 0,
					method: 'post',
					url: '/api/goods/goodsdetail',
					data: {
						id: this.id
					}
				})
			},
			// 评论列表
			goodsCommentList() {
				return this.$request({
					loading: 0,
					method: 'post',
					url: '/api/index/goodsCommentList',
					data: {
						id: this.id,
						page: this.page
					}
				})
			},
			// 触底加载
			async ReachBottomPage() {
				let result = await this.goodsCommentList()
				let data = result.data.data.data
				this.commList = this.commList.concat(data)
				if (data.length == 0) {
					this.page--
					this.loadStatus = 'nomore'
				}
			},

			renderPage([res1, res2]) {
				// 话题详情
				let data = res1.data.data
				this.topicUser = data
				this.label = data.label
				this.viewUser = data.viewUser
				if (this.topicUser.voc) {
					audioContext.src = this.topicUser.voc
					audioContext.onEnded(res => {
						console.log('结束了')
						this.isplay = false
					})
				}
				// 评论列表
				console.log(res2)
				this.commList = res2.data.data.data
				uni.hideLoading();
				this.show = true
			},
			// 发送评论
			async sendmsg() {
				if (this.value == '') {
					uni.showToast({
						title: '说点啥吧',
						icon: 'none'
					})
					return
				}
				try {
					this.$request({
							loading: 1,
							method: 'post',
							url: '/api/user/addGoodsComment',
							data: {
								goods_id: this.id,
								content: this.value,
							}
						})
						.then(result => {
							this.commList.unshift(result.data.data[0])
							this.value = ''
						})
						.catch((err) => {
							const promiseArr = [this.getUser(), this.goodsCommentList()]
							Promise.all(promiseArr).then(resArr => {
								this.renderPage(resArr)
							})
							this.value = ''
							console.log('err', err)
						})
				} catch (e) {
					uni.showToast({
						title: e.data.msg,
						icon: 'none'
					})
					//TODO handle the exception
				}

			},
			// 点赞评论
			async likeComment(id, index) {
				try {
					let result = await this.$request({
						loading: 1,
						method: 'GET',
						url: '/api/user/likeComment',
						data: {
							id
						}
					})
					this.commList[index].is_like = !this.commList[index].is_like
					this.commList[index].like_num += this.commList[index].is_like ? 1 : -1
				} catch (e) {
					uni.showToast({
						title: e.data.msg,
						icon: 'none'
					})
				}

			},
			// 删除评论
			delcomment(id, index) {
				uni.showModal({
					title: '提示',
					content: '确定要删除该条评论吗？',
					success: async (res) => {
						if (res.confirm) {
							try {
								let result = await this.$request({
									loading: 1,
									method: 'post',
									url: '/api/user/editcomment',
									data: {
										id: id,
										type: 'del',
										num: 0,
										goods_id: this.id
									}
								});
								this.commList.splice(index, 1)
							} catch (e) {
								uni.showToast({
									title: e.data.msg,
									icon: "none"
								})
							}

						} else if (res.cancel) {

						}
					}
				});
			},



			// 购买付费帖子
			// https://peiwanblogs.huolieniaowangluo.com/api/user/buy_goods
			async submitPay() {
				try {
					let result = await this.$request({
						loading: 1,
						method: 'post',
						url: '/api/user/buy_goods',
						data: {
							id: this.id
						}
					})
					this.topicUser.is_buy = 1
				} catch (e) {
					uni.showToast({
						title: e.data.msg,
						icon: "none"
					})
					//TODO handle the exception
				}

			},
			// 投票
			async toupiao(itempk, index) {
				try {
					let sendboy = '投票给-' + itempk.body
					let result = await this.$request({
						loading: 0,
						method: 'post',
						url: '/api/goods/do_vote',
						data: {
							id: this.id,
							index: index,
							neirong: sendboy
						}
					});
					this.topicUser.pklist[index].zhi++
				} catch (e) {
					this.msg(e.data.msg)
				}
			},
			async upvote(id) {
				let result = await this.$request({
					loading: 0,
					method: 'GET',
					url: '/api/user/likeGoods',
					data: {
						id,
					}
				})
				this.topicUser.is_like = !this.topicUser.is_like
				if (this.topicUser.is_like) {
					this.Ascale = true
					setTimeout(() => {
						this.Ascale = false
					}, 1500)
					this.topicUser.like_num += 1
				} else {
					this.topicUser.like_num -= 1
				}
			},
			async clickTerad(id) {
				try {
					let result = await this.$request({
						loading: 0,
						method: 'post',
						url: '/api/user/treadGoods',
						data: {
							id,
						}
					})
					this.topicUser.is_tread = this.topicUser.is_tread == 0 ? 1 : 0
					if (this.topicUser.is_tread == 0) {
						this.topicUser.tread_num--
					} else {
						this.trample = true
						setTimeout(() => {
							this.trample = false
						}, 1500)
						this.topicUser.tread_num++
					}
				} catch (e) {
					console.log(e)
					this.msg(e.data.msg)
				}
			},
			async getRedPop() {
				this.$refs['redPacket'].open()
			},
			previewImage(current) {
				uni.previewImage({
					urls: this.topicUser.mainImage,
					current,
					loop: true,
					longPressActions: {
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data
								.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			goTagsList(id) {
				uni.navigateTo({
					url: "/circlePages/tags_list?id=" + id
				})
			},
			// 关注 取消关注
			async guanzhu(user_id, index) {
				try {
					let result = await this.$request({
						url: '/api/user/followUser',
						data: {
							user_id,
						}
					})
					this.topicUser.is_follow = !this.topicUser.is_follow
				} catch (e) {
					uni.showToast({
						title: e.data.msg,
						icon: 'none'
					})
				}

			},
			fuzhi(neirong) {
				uni.setClipboardData({
					data: neirong,
					complete() {
						uni.showToast({
							title: "已复制到剪贴板",
							icon: 'none'
						})
					}
				})
			},
			// 播放语音
			play() {
				this.isplay = !this.isplay
				this.isplay ? audioContext.play() : audioContext.pause()
			},
			gouser(item) {
				uni.navigateTo({
					url: "/circlePages/blogger_other_user?id=" + item.user_id
				})
			}

		}
	}
</script>
<style lang="scss" scoped>
	.main {
		padding: 24rpx 30rpx;

		.topic {
			display: flex;
			margin-bottom: 32rpx;
			background: #ffffff;
			padding: 15px;
			border-radius: 8px;

			.left {
				image {
					width: 72rpx;
					height: 72rpx;
					border-radius: 50%;
				}
			}

			.right {
				padding-left: 20rpx;
				flex: 1;
				position: relative;

				.m-bot {
					margin-bottom: 20rpx;
				}

				.comm-btn {
					min-width: 80rpx;
					height: 37rpx;
					background: linear-gradient(180deg, #DB89F5 0%, #834BF4 100%);
					border-radius: 24rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #FFFFFF;
					text-align: center;
					line-height: 37rpx;
				}

				.attention {
					text-align: center;

					image {
						width: 40rpx;
						height: 37rpx;
					}

					.attention-text {
						font-size: 24rpx;
						font-weight: 500;
						color: #FFFFFF;
					}
				}

				.lv-name {
					.name {
						font-size: 26rpx;
						font-weight: bold;
						color: #333333;
					}

					.lv {
						margin-left: 10rpx;
						width: 134rpx;
						height: 32rpx;
						background: url('https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/vipbg1.png') no-repeat;
						background-size: 100%;
						display: flex;
						align-items: center;

						text {
							font-size: 22rpx;
							font-weight: bold;
							color: #FFFFFF;
							margin-left: 85rpx;
						}


						// .grade {
						// 	background-color: #69B7FD;
						// 	border-radius: 20rpx;
						// 	font-size: 22rpx;
						// 	font-weight: 500;
						// 	color: #FFFFFF;
						// 	padding: 4rpx 10rpx;
						// }

						// .v-icon {
						// 	width: 107rpx;
						// 	height: 32rpx;
						// }
					}
				}

				.time {
					font-size: 22rpx;
					font-weight: 400;
					color: #999999;
					margin-top: 4rpx;
				}

				// 图文
				.content {
					.details {
						// margin-top: 20rpx;
						margin-bottom: 24rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #333333;

						.price {
							color: #FF2626;
						}
					}

					.imgList {
						display: flex;
						flex-wrap: wrap;

						.image {
							margin: 0 17rpx 17rpx 0;
						}
					}

					.imgList .image:nth-child(3n) {
						margin-right: 0;
					}

					.pay {
						.details {
							margin-bottom: 0;
						}

						.pay-tag {
							font-size: 28rpx;
							font-weight: 400;
							color: #CFACFF;
							margin-right: 24rpx;
						}
					}

					.pay-btn {
						width: 80rpx;
						margin-top: 24rpx;
						margin-left: 131rpx;
						margin-bottom: 16rpx;
					}



					.video-kuai {
						margin-bottom: 16rpx;

						.video {
							width: 100%;
							height: 400rpx;
						}


					}

					.voice {
						width: fit-content;
						height: 72rpx;
						background: linear-gradient(180deg, #DB89F5 0%, #834BF4 100%);
						border-radius: 45rpx;
						padding: 0 16rpx;
						margin-bottom: 16rpx;

						.play {
							width: 48rpx;
							height: 48rpx;
						}

						.playIcon {
							width: 133rpx;
							height: 44rpx;
							margin: 0 16rpx;
						}

						.op-animation {
							animation: identifier 0.5s infinite;
						}

						.s {
							font-size: 28rpx;
							font-weight: 400;
							color: #FFFFFF;
						}
					}

					.mar-disk {
						margin-top: 12rpx;
						margin-bottom: 16rpx;
					}

					.network-disk {
						.text {
							word-wrap: break-word;
							white-space: normal;
							word-break: break-all;
							font-size: 28rpx;
							font-weight: 400;
							color: #FFB2F9;
						}

						.disk-btn {
							margin-left: 20rpx;
						}

						.hyperlink-btn {
							margin-top: 12rpx;
							margin-bottom: 16rpx;
						}
					}

					.vote-list {
						.vote-item {
							margin-bottom: 30rpx;

							.vote-title {
								font-size: 28rpx;
								font-weight: 400;
								color: #FFFFFF;
							}

							.vote-xian {
								.vote-btn {
									width: 100rpx;
									height: 53rpx;
									background: linear-gradient(180deg, #DB89F5 0%, #834BF4 100%);
									border-radius: 42rpx;
									font-size: 26rpx;
									font-weight: 500;
									color: #FFFFFF;
									text-align: center;
									line-height: 53rpx;
									margin-left: 24rpx;
								}

							}
						}
					}

					.get-btn {
						width: 152rpx;
						height: 41rpx;
						background: linear-gradient(180deg, #DB89F5 0%, #834BF4 100%);
						border-radius: 24rpx;
						font-size: 24rpx;
						color: #FFFFFF;
						text-align: center;
						line-height: 41rpx;
						margin-bottom: 16rpx;
						margin-left: 126rpx;
					}

				}

				@keyframes identifier {
					0% {
						opacity: 0.8;
					}

					50% {
						opacity: 0.5;
					}

					100% {
						opacity: 0.3;
					}
				}

				.topic-list {
					margin-top: 8rpx;

					.topic-list-item {
						font-size: 24rpx;
						font-weight: 400;
						background-color: rgba(153, 153, 153, 0.28);
						padding: 6rpx 16rpx;
						border-radius: 24rpx;
						margin: 0 10rpx 10rpx 0;

						.t1 {
							color: #FFB2F9;
						}

						.t2 {
							color: #333333ad;
						}
					}
				}

				.foot {
					margin-top: 14rpx;

					.foot-left {
						.num {
							font-size: 24rpx;
							font-weight: 400;
							color: #FFFFFF;
							margin-left: 6rpx;
						}
					}

					.foot-right {
						position: relative;

						&-item {
							display: flex;
							align-items: center;
							margin-left: 24rpx;

						}

						.num {
							font-size: 24rpx;
							font-weight: 400;
							color: #999999;
							margin-left: 10rpx;
						}

						.img1 {
							width: 32rpx;
							height: 33rpx;
							z-index: 1;
						}

						.zoom {
							animation: scaleAnimation .5s;
						}

						@keyframes scaleAnimation {
							0% {
								transform: scale(0.4);
							}

							50% {
								transform: scale(1.2);
							}

							100% {
								transform: scale(1);
							}
						}

						.piaofu {
							width: 32rpx;
							height: 33rpx;
							position: absolute;
							top: 0rpx;
							animation: f 1.5s ease-in-out;
						}

						@keyframes f {
							0% {
								top: 0;
								opacity: 1;
							}

							100% {
								top: -100rpx;
								opacity: 0;
							}
						}

						.img2 {
							width: 34rpx;
							height: 31rpx;
						}

						.img3 {
							width: 32rpx;
							height: 34rpx;
						}

						.fangda {
							animation: fangda 0.5s linear;
						}

						@keyframes fangda {
							0% {
								transform: scale(1, 1);
							}

							25% {
								transform: scale(0.4, 0.4);

							}

							70% {
								transform: scale(1.2, 1.2);
							}

							100% {
								transform: scale(1, 1);
							}
						}
					}
				}
			}
		}

		.critic-user {
			.critic-title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;
				margin-top: 48rpx;
				margin-bottom: 36rpx;
			}

			.list {
				.item {
					display: flex;
					border-bottom: 1px solid #dfdfdf;
					margin-bottom: 32rpx;

					.item-left {

						image {
							width: 68rpx;
							height: 68rpx;
							border-radius: 50%;
						}
					}

					.item-right {
						flex: 1;
						padding-left: 16rpx;

						.top {
							display: flex;
							align-items: center;
							justify-content: space-between;
						}

						.details {
							font-size: 32rpx;
							font-weight: 400;
							color: #333333;
							margin-top: 20rpx;
							margin-bottom: 32rpx;
						}

						.top-left {
							.name_del {
								display: flex;
								align-items: center;

								.name {
									font-size: 24rpx;
									font-weight: 400;
									color: #333333;
								}

								.del {
									font-size: 22rpx;
									color: #e83a30;
									margin-left: 20rpx;
								}
							}


							.time {
								font-size: 22rpx;
								font-weight: 400;
								color: #999999;
								margin-top: 4rpx;
							}
						}

						.top-right {
							display: flex;
							align-items: center;

							.top-right-item {
								display: flex;
								align-items: center;

								.img1 {
									width: 28rpx;
									height: 27rpx;
								}

								.img2 {
									width: 26rpx;
									height: 27rpx;
									margin-left: 32rpx;
								}

								text {
									font-size: 22rpx;
									font-weight: 400;
									color: #333333ad;
									margin-left: 10rpx;
								}
							}
						}
					}
				}
			}
		}

		.foot-input {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			height: 100rpx;
			background-color: #ffffff;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;

			input {
				width: 534rpx;
				height: 72rpx;
				background: #efefef;
				border-radius: 42rpx;
				padding-left: 32rpx;
				color: #333333;
			}

			.p-class {
				font-size: 26rpx;
				font-weight: 400;
				color: #999999;
			}

			.btn {
				width: 132rpx;
				height: 72rpx;
				background: linear-gradient(180deg, #DB89F5 0%, #834BF4 100%);
				border-radius: 42rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #FFFFFF;
				text-align: center;
				line-height: 72rpx;
			}
		}
	}
</style>